<template>
	<view class="card">
		<view class="ul">
			<view class="li" v-for="(item,index) in treeData" :key="index">
				<view class="item" :class="{'line-left': index !== 0, 'line-right': index != treeData.length - 1}">
					<view class="item-name"
						:class="{'line-bottom':item.children && item.children.length > 0,'line-top':!treeFirst}">
						<view class="content">
							<!-- 				<image src="../../static/logo.png" mode="widthFix"
								style="width: 120rpx;height: auto;border-radius: 50%;"></image> -->
							<text class="name">{{item.name}}</text>
							<button @click="checkDetail(item)" class="Detailbutton">查看详情</button>
							<!-- <button @click="addItem(item)">添加子级</button> -->
							<!-- <button @click="delItem(item)">删除当前</button> -->

						</view>
					</view>
				</view>
				<tree-list v-if="item.children && item.children.length > 0" :tree-data="item.children"></tree-list>
			</view>
		</view>
	</view>
</template>

<script setup name="tree-list">
	import {
		inject,
		ref
	} from 'vue'
	// const delItem = inject('delItem')
	// const addItem = inject('addItem')
	const checkDetail = inject('checkDetail')
	defineProps(['treeData', 'treeFirst'])

	const level = ref(1) // 初始化级数为 1
</script>

<style lang="scss" scoped>
	$line-length: 20px; //线长
	$spacing: 20px; //间距
	$extend: calc(#{$spacing}); //延长线

	// 线样式
	@mixin line {
		content: "";
		display: block;
		width: 4px;
		height: $line-length;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		background: #9b2824;
	}

	.card {
		transition: all .3s;

		.ul {
			display: flex;
			justify-content: center;
			transition: all .3s;

			.li {
				transition: all .3s;

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					transition: all .3s;

					&-name {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: $spacing;
						padding: 20rpx;
						background: #b66666;
						border-radius: 16rpx;
						box-shadow: 0px 5rpx 30rpx 5rpx rgba(0, 0, 0, 0.04);
						;

						.content {
							display: flex;
							flex-direction: column;
							align-items: center;

							.name {
								margin: 10rpx 0 18rpx;
								color: #222;
								font-size: 40rpx;
								font-weight: 1000;
							}

							.Detailbutton {
								  white-space: nowrap;
							}
						}
					}
				}
			}

		}

		// 向下的线
		.line-bottom {
			&::after {
				@include line();
				bottom: -$line-length;
			}
		}

		// 向上的线
		.line-top {
			&::before {
				@include line();
				top: -$line-length;
			}
		}

		// 向左的线
		.line-left {
			&::after {
				@include line();
				width: calc(50% + #{$spacing});
				height: 4px;
				left: calc(-50% - #{$extend});
				top: 0;
			}
		}

		// 向右的线
		.line-right {
			&::before {
				@include line();
				width: calc(50% + #{$spacing});
				height: 4px;
				right: calc(-50% - #{$extend});
				top: 0;
			}
		}
	}
</style>